import { Button, Checkbox, message, Modal } from "antd";
import { connect } from "dva";
import React, { PureComponent } from "react";
@connect(state => ({
  theme: state.theme,
  currentUser: state.user.currentUser,
  menu: state.menu,
}))
export default class fieldModal extends PureComponent {
  state = {
    buttonLoading: false,
    tableColumns: [],
    show: false,
    tempTableColumns: [],
    firstOpen: true
  };

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
  }
  ok = () => {
   const {onSubmit}=this.props;
   this.setCommonUse();
   onSubmit && onSubmit(this.state.tableColumns);
   this.close();
  };

  setLoading = (flag) => {
    this.setState({
      buttonLoading: flag,
    });
  };

  getTableColumns = (tableColumns) => {
    const _tableColumns = this.getCommonUse();
    return tableColumns.map(i => {
      const _current = (_tableColumns || []).find(j => j.dataIndex == i.dataIndex);
      if (_current) {
        i.columnShow = _current.columnShow;
      }
      return i;
    });
  }

  open = (tableColumns) => {
    this.setState({
      tableColumns,
      show: true
    })
  }

  setCommonUse  = () => {
    const { menu : { userProfile } } = this.props;
    //localStorage.setItem(`${this.props.fieldName}fieldModal_${userProfile.merchant1Id}_${userProfile.accountName}` , JSON.stringify(this.state.tableColumns));
    const data = JSON.parse(localStorage.getItem("creditData"));
    const id = `${this.props.fieldName}fieldModal_${userProfile.merchant1Id}_${userProfile.accountName}`;
   //首先进入页面需要先判断是否存在localData
   if (data) {
    data[id] = JSON.stringify(this.state.tableColumns);
   localStorage.setItem("creditData", JSON.stringify(data));
    }else{
     const creditData ={};
     creditData[id] = JSON.stringify(this.state.tableColumns);
     localStorage.setItem("creditData", JSON.stringify(creditData));
  }
  }

  getCommonUse= () => {

    const { menu : { userProfile } } = this.props;
    //const columns = localStorage.getItem(`${this.props.fieldName}fieldModal_${userProfile.merchant1Id}_${userProfile.accountName}`);
    const data = JSON.parse(localStorage.getItem("creditData"));
    const id = `${this.props.fieldName}fieldModal_${userProfile.merchant1Id}_${userProfile.accountName}`;
    let columns = null;
    if(data){
      columns =  data[id];
      }
    let _c = [];
    let flag = true;
    try {
      _c = JSON.parse(columns)
    } catch (error) {
      flag = false;
    }
    if (flag) {
      return _c;
    }
    return []
  }
  close = () => {
    const { closeModal } = this.props;
    this.setState({
      show: false,
      buttonLoading: false
    });
    closeModal && closeModal();
  };

  onChange = (checkedValues) => {
    console.log('checked', checkedValues);
    // this.setState({
    //   checkedList: checkedValues,
    // });
  };

  renderSimpleForm() {
    const { modalVisible,fieldList,checked} = this.props;
    const { buttonLoading,tableColumns} = this.state;
    const footer = (
      <div>
        <Button onClick={this.close}>取消</Button>
        <Button loading={buttonLoading} onClick={this.ok} type="primary">
          确定
        </Button>
      </div>
    );
    return (
      <Modal
        footer={footer}
        title="展示字段"
        visible={this.state.show}
        onCancel={this.close}
        style={{ top: 50 }}
      >
        <div style={{ marginLeft: 50 }}>
          <h3>请选择需要展示的字段：</h3>
          {/* <Checkbox.Group onChange={this.onChange} > */}
          {
              tableColumns.map((i, index) => (
                
                <div style={{ marginTop: 10, marginLeft: 10 }} key={`checkC${i.dataIndex}`}>
                  
                  <Checkbox 
                      checked={i.columnShow}
                      onChange={e => {
                        this.setState({
                          tableColumns: tableColumns.map((j , jindex) => {
                            if (index == jindex) {
                              j.columnShow = e.target.checked;
                            }
                            return j;
                          })
                        })
                      }}
                  >
                    {i.title}
                  </Checkbox>
                 </div>
            ))
          }
          {/* </Checkbox.Group> */}
          {/* <Checkbox.Group
            value={checkedList}
            style={{ width: "100%" }}
            onChange={this.onChange}
          >
            {this.getCheckBox()}
          </Checkbox.Group> */}
        </div>
      </Modal>
    );
  }

  render() {
    return this.renderSimpleForm();
  }
}
